<template>
  <div id="centerRight1">
    <chartBox :img="2" title="派出所警情汇总" :onceKey="timeMode.endTime">
      <div
          :style="{padding:'6px 24px 8px',height: timeMode.mode === 2 && timeMode.endTime ? '200px': '428px',overflow:'hidden'}">
        <div style="height: 99%;overflow: hidden">
          <scrollTable :config="config" :isScroll="true"></scrollTable>
        </div>
      </div>
    </chartBox>
  </div>
</template>

<script>
import chartBox from '_c/chartBox.vue'
import scrollTable from '_c/scrollTable.vue'
import upIcon from '@/assets/img/icon/up.png'
import downIcon from '@/assets/img/icon/down.png'
import { isNotEmpty } from '@/utils'

export default {
  props: {
    mapType: {},
    apiData: {},
    timeMode: {},

  },
  watch: {
    apiData: {
      handler(val) {
        if (!isNotEmpty(val)) return
        this.dataFormat(val)
      },
      immediate: true,
      deep: true
    },
    mapType: {},
  },
  data() {
    return {
      config: {
        header: ['序号',
          '战区',
          '警情总量',
          '环比变化',
          '同比变化'],
        data: [],
        rowNum: 4, //表格行数
        headerHeight: 35,
        headerBGC: '#021630', //表头
        oddRowBGC: '#031936', //奇数行
        evenRowBGC: '#042147', //偶数行
        index: false,
        columnWidth: [68, 94, 94, 94, 94],
        align: ['center'],
      },
    }
  },
  components: {
    chartBox,
    scrollTable
  },
  mounted() {
  },
  created() {
  },
  methods: {
    // 组装数据
    dataFormat() {
      // 示例用法
      const statusF = (v1, v2) => {
        if (v1 > v2) {
          return 'up'
        } else if (v2 > v1) {
          return 'down'
        } else {
          return 'flat'
        }
      }
      const items = this.apiData.map((item) => {
        let status = statusF(item.curNum, item.tongQiNum)
        let status2
        if (this.timeMode.mode === 2 && !!this.timeMode.endTime) {
          status2 = statusF(item.curNum, item.huanBiNum)
        }
        return {
          title: item.areaName + '所',
          params: [
            {value: item.curNum || 0, status: ''},
            {
              value: (this.timeMode.mode === 2 && !!this.timeMode.endTime) ? (item.huanBiBianHuaLiang  || 0) + '%' : (item.tongQiNum || 0),
              status: (this.timeMode.mode === 2 && !!this.timeMode.endTime) ? status2 : ''
            },
            {value: item.tongBiBianHuaLiang  + '%', status: status}
          ]
        }
      })
      //默认配置
      let config = {
        header: ['序号',
          '派出所',
          '警情总量',
          `${this.timeMode.mode === 1 ? '同期量' : '环比变化'}`,
          '同比变化'],
        data: [],
        rowNum: this.mapType === 1 ? 11 : 5, //表格行数
        headerHeight: 35,
        headerBGC: 'transparent', //表头
        oddRowBGC: 'transparent', //奇数行
        evenRowBGC: 'transparent', //偶数行
        index: false,
        columnWidth: [68, 94, 94, 94, 94],
        align: ['center'],
        waitTime: 100,
      }
      config.data = items.map((item, idx) => {
        // 检查必备属性是否存在
        // if (!item.hasOwnProperty('index') || !item.hasOwnProperty('title') || !item.hasOwnProperty('params')) {
        //   throw new Error(`第 ${idx} 项数据缺少必需属性 (index, title, params)`);
        // }

        const row = []
        // 第一项：序号，包裹在 div 中
        row.push(`<div class="table_data">${idx + 1}</div>`)
        // 第二项：标题，包裹在 div 中
        row.push(`<div class="table_data">${item.title}</div>`)

        // 后续项：参数，根据类型进行格式化
        item.params.forEach(param => {
          // 如果参数为对象并且包含 value 和 status，则根据 status 来决定样式
          if (
              typeof param === 'object' &&
              param !== null
          ) {
            let arrow = ''
            let className = 'table_data'
            if (param.status === 'up') {
              arrow = `<img src="${upIcon}" alt=""/>`
            } else if (param.status === 'down') {
              arrow = `<img src="${downIcon}" alt=""/>`
            } else if (param.status === 'flat') {
              className = 'table_data blue'
            }
            row.push(`<div class='${className}'> ${arrow}${param.status === 'flat' ? '持平' : param.value}</div>`)
          } else {
            // 如果不是对象，则直接转换为字符串
            row.push(String(param))
          }
        })

        return row
      })
      this.config = config
    }
  }
}
</script>

<style lang="scss" scoped>
$box-width: 472px;
$box-height: 398px;

#centerRight1 {
  //height: $box-height;
  width: $box-width;

}

</style>
